<script setup lang='ts'>
import { computed, reactive, ref } from 'vue';
import { adminListApi, addAdminApi, deleteAdminApi } from '../../api/admin'
import { CloseBold } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, type Action, type ElTree, } from "element-plus";
import type { IAdminData, Tree } from "@/myType"


let adminList = ref([])
// 获取列表数据
adminListApi().then((res: any) => {
    adminList.value = res.data
})

// 分页
// 1)、每页10条数据。
let pageSize = ref(10);
// 2)、当前页码：
let currentPage = ref(1);

let list = computed(() => (adminList.value as any).slice(pageSize.value * (currentPage.value - 1), pageSize.value * currentPage.value))

// 删除函数
function handleDelete(adminid: string) {
    deleteAdminApi({
        adminid
    }).then((res: any) => {
        if (res.code == '200') {
            adminList.value = (adminList.value as any).filter((item: any) => item.adminid != adminid)
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
        }
    })

}

// 抽屉
const table = ref(false)

// 选择权限部分

const data = reactive<IAdminData>({
    adminname: "",
    password: "",
    role: '1',
    checkedKeys: []
})
const treeRef = ref<InstanceType<typeof ElTree>>()

function handleCheckChange() {
    // console.log("获取选中的节点:", treeRef.value!.getCheckedKeys(false))
    data.checkedKeys = treeRef.value!.getCheckedKeys(false);
}

const grantData: Tree[] = [
    {
        menuid: "0-0",
        label: '系统首页',
    },
    {
        menuid: "0-1",
        label: '轮播图管理',
        children: [
            {
                menuid: "0-1-0",
                label: '轮播图列表'
            },
            {
                menuid: "0-1-1",
                label: '添加轮播图',
            },
        ],
    },
    {
        menuid: "0-2",
        label: '产品管理',
        children: [
            {
                menuid: "0-2-0",
                label: '产品列表',
            },
            {
                menuid: "0-2-1",
                label: '秒杀列表',
            },
            {
                menuid: "0-2-2",
                label: '推选列表',
            },
            {
                menuid: "0-2-3",
                label: '筛选列表',
            },

        ],
    },
    {
        menuid: "0-3",
        label: '账户管理',
        children: [
            {
                menuid: "0-3-0",
                label: '用户列表',
            },
            {
                menuid: "0-3-1",
                label: '管理员列表',
            }
        ],
    },
    {
        menuid: '0-4',
        label: '设置'
    },
    {
        menuid: "0-5",
        label: '数据可视化',
        children: [
            {
                menuid: "0-5-0",
                label: 'echarts使用示例',
            },
            {
                menuid: "0-5-1",
                label: 'antv-g2使用示例',
            },
            {
                menuid: "0-5-2",
                label: 'antdcharts',
            }
        ],
    },
    {
        menuid: "0-6",
        label: '编辑器',
        children: [
            {
                menuid: "0-6-0",
                label: '富文本编辑器',
            },
            {
                menuid: "0-6-1",
                label: 'markdown编辑器',
            }
        ],
    },
    {
        menuid: "0-7",
        label: '导入以及导出',
        children: [
            {
                menuid: "0-7-0",
                label: '导入excel',
            },
            {
                menuid: "0-7-1",
                label: '导出excel',
            }
        ],
    },
    {
        menuid: "0-8",
        label: '地图使用',
        children: [
            {
                menuid: "0-8-0",
                label: '百度地图',
            },
            {
                menuid: "0-8-1",
                label: '高德地图',
            },
            {
                menuid: "0-8-2",
                label: '腾讯地图',
            }
        ],
    },
    {
        menuid: '0-9',
        label: '客服'
    }
]

function addAdminFn() {
    addAdminApi(data).then((res: any) => {
        if (res.code === "200") {
            adminListApi().then((res: any) => {
                adminList.value = res.data
            })
            ElMessage({
                message: '添加成功',
                type: 'success',
            })
            table.value = false
            data.adminname = ""
            data.password = ""
            data.role = '1'
            data.checkedKeys = []
            treeRef.value!.setCheckedKeys(['0-0'])
        } else {
            data.adminname = ""
            data.password = ""
            ElMessage({
                message: res.message,
                type: 'error',
            })
        }
    })
}

</script>
<template>
    <div class="container">
        <el-button @click="table = true" type="primary">添加管理员</el-button>
        <el-drawer :with-header="false" v-model="table" direction="rtl" size="500px">
            <header>
                <div class="title">
                    <h4>添加管理员</h4>
                    <el-icon @click="table = false">
                        <CloseBold />
                    </el-icon>
                </div>
            </header>
            <!-- 输入部分 -->
            <el-input v-model="data.adminname" placeholder="管理员账户" />
            <el-input v-model="data.password" placeholder="密码" />
            <el-select v-model="data.role" placeholder="管理员类别" style="width: 260px;">
                <el-option label="管理员" value="1" />
                <el-option label="超级管理员" value="2" />
            </el-select>

            <!-- 权限选择部分 -->
            <section>
                <el-tree :default-checked-keys="['0-0']" ref="treeRef" node-key="menuid" :data="grantData" show-checkbox
                    @check="handleCheckChange" />
            </section>

            <el-button type="primary" @click="addAdminFn">添加管理员</el-button>
        </el-drawer>



        <el-table :data="list" style="width: 100%" height="700px" size="large">
            <el-table-column label="序号" min-width="60px">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="adminname" label="账号" min-width="200px" />

            <el-table-column prop="role" label="权限" min-width="104px">
                <template #default="scope">
                    <el-tag class="mx-1" effect="plain" type="info" size="small" v-if="scope.row.role == 1">
                        管理员
                    </el-tag>
                    <el-tag class="mx-1" effect="plain" type="success" size="small" v-else>
                        超级管理员
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" min-width="180">
                <template #default="scope">
                    <el-button type="primary" plain @click="">编辑</el-button>
                    <el-button type="danger" plain @click="handleDelete(scope.row.adminid)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="adminList.length" v-model:page-size="pageSize"
            v-model:current-page="currentPage" />
    </div>
</template>
<style scoped>
.title {
    display: flex;
    justify-content: space-between;
    place-items: center;
    margin: 0;
    line-height: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 2px 2px 0 0;
    margin-bottom: 24px;
}

.title h4 {
    font-size: 16px;
    color: rgba(0, 0, 0);
}

.title .el-icon {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.575);
}

.title .el-icon:hover {
    color: black;
}

.el-input {
    width: 260px;
    box-sizing: border-box;
    padding: 0;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
    margin: 0 0 24px;
    vertical-align: top;
}

section {
    margin: 20px 0;
}

.el-pagination {
    margin-top: 15px;
    float: right;
}
</style>
